<template>
  {login}
  <el-form>
    <el-form-item label="账号">
      <el-input
        v-model="account"
        placeholder="请输入账号"
        type="text"
      ></el-input>
    </el-form-item>

    <el-form-item label="密码">
      <el-input
        v-model="password"
        placeholder="请输入密码"
        type="password"
        show-password
      ></el-input>
    </el-form-item>

    <el-form-item label="验证码">
      <el-input
        v-model="code"
        placeholder="请输入验证码"
        type="text"
      ></el-input>
    </el-form-item>
    <img @click="img" :src="img_url" alt="获取验证码" />
    <el-form-item>
      <el-button type="default" @click="login()">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { post_login } from "@/utils/api";
import { v4 as uuidv4 } from 'uuid';
export default {
  name: "login",
  data() {
    return {
      account: "",
      password: "",
      uuid: "",
      code: "",
      img_url: "",
    };
  },
  mounted() {
    this.img()
  },
  methods: {
    img() {
      this.uuid = uuidv4();
      this.img_url = "http://127.0.0.1:8000/user/image/" + this.uuid;
      console.log("image", this.img_url);
    },
    login() {
      post_login({"account": this.account,"password": this.password,"uuid": this.uuid,"code": this.code})
      .then(resp=>{
        if (resp.data.code == 200){
            console.log("登陆成功", resp)
            localStorage.setItem("token", resp.data.token);
            localStorage.setItem("id", resp.data.data.id);
            localStorage.setItem("name", resp.data.data.name);
            console.log("id>>>", localStorage.getItem("id"));
            console.log("用户名>>>", localStorage.getItem("name"));
            alert("登陆成功")
            this.$router.push("/home");
        }else{
          console.log("登陆失败", resp)
        alert(resp.data.msg)
        }
      }).catch(err=>{
        console.log("登陆失败", err)
        alert("登陆失败")
      })
    },
  },
};
</script>

<style>
</style>